<template>
<div class="backimg">
  <div class="pic">
    <img :src="user.avatar" alt="">
  </div>
  <div class="list">
    <ul>
      <router-link to="/myCollection"><li><span>我的收藏</span><a-icon type="right" /></li></router-link>
      <router-link to="/minemessage"><li><span style="color: #05f897">查看个人信息</span><a-icon type="right" /></li></router-link>
      <router-link to="/changemine"><li><span style="color: #b5d6ec">修改个人信息</span><a-icon type="right" /></li></router-link>
    </ul>
  </div>
<!--  <button><span @click="out">退出登录</span></button>-->
  <div>
    <a-button type="primary" @click="showModal">
      退出登录
    </a-button>
    <a-modal v-model="visible" title="知晓" @ok="handleOk" okText="确认" cancelText="再看会儿">
      <p>远赴人间惊鸿宴</p>
      <p style="text-indent: 2em"> 一睹人间盛世颜</p>
    </a-modal>
  </div>
</div>
</template>

<script>
import {userInfo} from "@/api/api";
import {logout} from "@/api/api";
import {Notify} from "vant";
export default {
name: "mine",
  data() {
    return {
      visible: false,
      user:""
    };
  },
  methods:{
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
      logout().then();
      Notify({ type: 'success', message: '退出成功' });
      this.$router.push("/")
    },
  },
  created() {
  userInfo().then(res=>{
    console.log(res.data)
    this.user=res.data
  })
  }
}
</script>

<style scoped lang="less">
.pic{
  height: calc(100vh / 3);
  line-height: calc(100vh / 3);
  padding: 0  60px ;
  box-sizing: border-box;
  margin: auto;
  text-align: center;
  img{
    width: 60%;
    border-radius: 100%;
  }
}
.list{
  height: calc(100vh / 3);
  //line-height: calc(100vh / 3);
  ul{
    list-style: none;
    li{
      padding: 30px;
      height: 40px;
      display: flex;
      justify-content: space-around;
      justify-items: center;
      font-size: 17px;
    }
    li:nth-child(1),
    li:nth-child(3){
      border-top: 1px dashed #ccc;
      border-bottom: 1px dashed #ccc;
    }
  }
}
button{
  font-size: 17px;
  width: 120px;
  height: 40px;
  margin:25px auto;
  text-align: center;
  display: flex;
  justify-content: center;
  text-align: center;
  line-height: 35px;

}

.backimg {
  color: #e37459;
  height:100vh;
  background-image: url("http://pic.netbian.com/uploads/allimg/200808/001100-1596816660d2fe.jpg");
  background-size: 100%;

}
</style>